<template>
  <div class="eventCount" v-if="events.length != 0">
    <div class="eventCount_item" v-for="(item, index) in events" :key="index">
      <div class="image">
        <GlobalImageDeep
          :imgWidth="70"
          :imgHeight="70"
          :url="item.user.avatarUrl"
        />
      </div>
      <div class="info">
        <div class="info_name">{{ item.user.nickname }}</div>
        <div class="info_time">{{ formatCreateTime(item.eventTime) }}</div>
        <div class="info_content">{{ formatContent(item.json).msg }}</div>
        <div class="info_img">
          <!-- :src="picItem.originUrl" -->
          <div v-for="(picItem, picIndex) in item.pics" :key="picIndex">
            <el-image
              :src="formatPic(picItem)"
              :preview-src-list="item.preview"
            >
              <div slot="error">
                <!-- <img src="https://z3.ax1x.com/2021/11/19/Ib4IVs.png" /> -->
                <img :src="$constant.ImgError" />
              </div>
              <div slot="placeholder">
                <!-- <img src="https://z3.ax1x.com/2021/11/16/IRL9rq.png" /> -->
                <img :src="$constant.ImgNowLoading" />
              </div>
            </el-image>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <el-row type="flex" justify="center">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="queryInfo.limit"
        @current-change="paginationCurrentChange"
        :current-page="currentPage"
        :hide-on-single-page="false"
      >
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
import moment from "moment";
import { mapState, mapMutations, mapActions } from "vuex";
import { getUserEvent } from ".././../../../api/myMusicApi";
export default {
  name: "eventCount",
  components: {},
  props: {
    uid: {
      required: true,
    },
    total: {
      required: true,
    },
  },
  data() {
    return {
      queryInfo: {
        uid: this.uid,
        // uid: "1506222511",
        limit: 10,
        lasttime: -1, // 默认是 -1
      },

      events: [],
      currentPage: 1,
      picList: [],
    };
  },
  created() {
    this.getUserEventMethod();
  },
  methods: {
    async getUserEventMethod() {
      let result = await getUserEvent(this.queryInfo);
      if (result.code === 200) {
        this.queryInfo.lasttime = result.lasttime;
        result.events.forEach((item) => {
          // item.pics.forEach((itemm) => {
          //   itemm.preview = [];
          // });
          item.preview = [];
          item.pics.forEach((itemm) => {
            item.preview?.push(itemm.originUrl);
          });
          console.log(item);
        });
        // });
        // result.events.forEach((item) => {
        //   item.pics.forEach((itemm) => {
        //     item.preview?.push(itemm.originUrl);
        //   });
        // });
        this.events = result.events;
      }
    },
    paginationCurrentChange(newPage) {
      if (newPage == 1) {
        this.queryInfo.lasttime = -1;
      }
      this.picList = [];
      this.getUserEventMethod();
    },
    formatCreateTime(time) {
      return moment(time).format("YYYY年MM月DD日");
    },
    formatContent(content) {
      let obj = JSON.parse(content);
      return obj;
    },
    formatPic(item) {
      // this.picList.push(item.originUrl);
      return item.originUrl + "?param=0x338";
    },
  },
  computed: {
    ...mapState({
      userStoreProfile: (state) => state.userStore.profile,
      userStoreCookie: (state) => state.userStore.cookie,
      userStoreToken: (state) => state.userStore.token,
      userStoreUserDetail: (state) => state.userStore.userDetail,
    }),
  },
};
</script>

<style lang="less" scoped>
.eventCount {
  /deep/ .el-pager li.active {
    color: #fff;
    background: @globalColor;
    border-radius: 50%;
    &:hover {
      color: #fff;
    }
  }
  /deep/ .el-pager li:hover {
    color: @globalColor;
  }
  .eventCount_item {
    display: flex;
    padding-bottom: 20px;
    border-bottom: 1px solid #999999;
    margin-bottom: 20px;
    .image {
      /deep/ .el-image img {
        border-radius: 8px;
      }
      padding-right: 20px;
    }
    .info {
      .info_name {
        font-size: 16px;
        margin-bottom: 6px;
        &:hover {
          color: @globalColor;
          cursor: pointer;
        }
      }
      .info_time {
        font-size: 14px;
        color: #999999;
        margin-bottom: 6px;
      }
      .info_content {
        color: #333333;
      }
      .info_img {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        margin-right: 10px;
        > div {
          height: 338px;
          width: 224px;
        }
        /deep/ .el-image {
          > div {
            width: 100%;
            height: 100%;
          }
          img {
            width: 100% !important;
            height: 100% !important;
          }
        }
      }
    }
  }
}
</style>
